<template>
	<view
		class="my-pie"
		:style="{
			width: containerStyle.width,
			height: containerStyle.height,
			backgroundImage: containerStyle.backgroundImage
		}"
	>
		<view
			class="pie-left"
			:style="{
				clip: leftStyle.clip,
				transform: leftStyle.transform,
				backgroundColor: leftStyle.backgroundColor
			}"
		></view>
		<view
			class="pie-right"
			:style="{
				clip: rightStyle.clip,
				transform: rightStyle.transform,
				backgroundColor: rightStyle.backgroundColor,
				backgroundImage: rightStyle.backgroundImage
			}"
		></view>
	</view>
</template>

<script>
export default {
	name: 'my-pie',
	props: {
		dia: {
			type: Number,
			default: 100
		},
		progress: {
			type: Number,
			default: 0
		},
		bColor: {
			type: String,
			default: '#E3E3E3'
		},
		bImage: {
			type: String,
			default: 'linear-gradient(0deg, #FF9C00 0%, #FFDC63 49%)'
		}
	},
	computed: {
		containerStyle() {
			return {
				width: `${this.dia}px`,
				height: `${this.dia}px`,
				backgroundImage: this.bImage
			};
		},
		leftStyle() {
			const style = {
				backgroundColor: this.bColor,
				clip: `rect(auto, ${this.dia / 2}px, auto, auto)`
			};
			if (this.progress < 50) {
				style.transform = 'rotate(0deg)';
			} else {
				style.transform = `rotate(${((this.progress - 50) / 50) * 180}deg)`;
			}
			return style;
		},
		rightStyle() {
			const style = {
				clip: `rect(auto, auto, auto, ${this.dia / 2}px)`
			};
			if (this.progress < 50) {
				style.backgroundColor = this.bColor;
				style.transform = `rotate(${(this.progress / 50) * 180}deg)`;
			} else {
				style.backgroundImage = this.bImage;
				style.transform = 'rotate(0deg)';
			}
			return style;
		}
	}
};
</script>

<style lang="less" scoped>
.my-pie {
	position: relative;
	border-radius: 50%;
	overflow: hidden;

	.pie-left {
		width: 100%;
		height: 100%;

		position: absolute;
	}

	.pie-right {
		width: 100%;
		height: 100%;

		position: absolute;
	}
}
</style>
